* {
    margin: 0px;
    padding: 0px;
}

.container {
    position: relative;
    top: 100px;
    left: 300px;
    width: 600px;
    height: 400px;
    background: pink;
}

body {
    /* perspective:1000px; */
    font-size: 20px;
    color: red;
}

.rotate {
    position: relative;
    left: 200px;
    top: 100px;
    /* border-radius:50%; */
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
}

.rotate img {
    width: 100px;
    height: 140px;
    position: absolute;
    -webkit-box-reflect: below 5px;
    color: #0ae052;
    -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, .6)))
}

.rotate p {
    position: absolute;
    width: 400px;
    height: 400px;
    left: -153px;
    top: -166px;
    border-radius: 50%;
    background-image: repeating-radial-gradient(circle at 50% 50%, #ff008c, #0b9bc7 10%, #0ae052 20%);
    opacity: .5;
    transform: rotateX(90deg) translateZ(-100px);
}

.rotate img:nth-child(1) {
    transform: rotateY(30deg) translateZ(200px);
}

.rotate img:nth-child(2) {
    transform: rotateY(60deg) translateZ(200px);
}

.rotate img:nth-child(3) {
    transform: rotateY(90deg) translateZ(200px);
}

.rotate img:nth-child(4) {
    transform: rotateY(120deg) translateZ(200px);
}

.rotate img:nth-child(5) {
    transform: rotateY(150deg) translateZ(200px);
}

.rotate img:nth-child(6) {
    transform: rotateY(180deg) translateZ(200px);
}

.rotate img:nth-child(7) {
    transform: rotateY(210deg) translateZ(200px);
}

.rotate img:nth-child(8) {
    transform: rotateY(240deg) translateZ(200px);
}

.rotate img:nth-child(9) {
    transform: rotateY(270deg) translateZ(200px);
}

.rotate img:nth-child(10) {
    transform: rotateY(300deg) translateZ(200px);
}

.rotate img:nth-child(11) {
    transform: rotateY(330deg) translateZ(200px);
}

.rotate img:nth-child(12) {
    transform: rotateY(360deg) translateZ(200px);
}